<template>
  <div class="agent frame_content m10" style="margin-bottom: 40px">
    <table class="common cent agentTable">
      <thead>
        <tr>
          <th>账号</th>
          <th>代理深度</th>
          <th>房间总数量</th>
          <th>可用房间数量</th>
          <th>在用房间数量</th>
          <th>总流水</th>
          <th>总余额</th>
          <th>到期时间</th>
          <th>房间</th>
          <th>操作</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>12345678</td>
          <td>10</td>
          <td>12</td>
          <td>5</td>
          <td>7</td>
          <td>100</td>
          <td>50</td>
          <td>2019</td>
          <td>
            <a href="javascript:void(0);" @click="accountAgent1(item)">15812</a>
          </td>
          <td>
            <a href="javascript:void(0);" @click="Add(item)">添加</a>
            <span>|</span>
            <a href="javascript:void(0);" @click="revision(item)">调整</a>
            <span>|</span>
            <input type="radio" name="series" />
            <!-- {{item.lottert_name}} -->
            启用
            <input type="radio" name="series" />
            禁用
          </td>
        </tr>
      </tbody>
    </table>
    <!-- 房间列表 -->
    <div ref="mode5" style="display: none">
      <div
        class="layui-layer layui-layer-page"
        id="layui-layer5"
        style="z-index: 1001; width: 800px; height: 75%; top: 8px; left: 25%;"
      >
        <div
          class="layui-layer-title"
          style="color: rgb(255, 255, 255); background: rgb(64, 85, 148); border: none; height: 30px; line-height: 30px; cursor: move;"
        >房间列表</div>
        <div class="layui-layer-content" style="height: 100%;">
          <div id="model1" class="layerModel layui-layer-wrap" style="display: block;">
            <div class="wrap">
              <table class="context">
                <tbody>
                  <tr>
                    <td>账号</td>
                    <td>深度代理</td>
                    <td>在线人数</td>
                    <td>总流水</td>
                    <td>总余额</td>
                    <td>到期时间</td>
                    <td>彩种</td>
                    <td>操作</td>
                  </tr>
                  <tr>
                    <td>admin</td>
                    <td>张三</td>
                    <td>100</td>
                    <td>100</td>
                    <td>369</td>
                    <td>2019</td>
                    <td>重庆时时彩</td>
                    <td>
                      <router-link :to="{ path: '/index/monitor' }">查看房间数据</router-link>
                    </td>
                  </tr>
                </tbody>
              </table>
            </div>
          </div>
        </div>
        <span class="layui-layer-setwin">
          <a @click="closemode5" class="layui-layer-ico layui-layer-close layui-layer-close1"></a>
        </span>
      </div>
      <div
        class="layui-layer-shade"
        id="layui-layer-shade3"
        style="z-index: 1000;background-color: rgb(0, 0, 0);opacity: 0.3;"
      ></div>
    </div>
    <!-- 添加 -->
    <div ref="mode6" style="display: none">
      <div
        class="layui-layer layui-layer-page"
        id="layui-layer5"
        style="z-index: 1001; width: 600px; height: 75%; top: 8px; left: 30%;"
      >
        <div
          class="layui-layer-title"
          style="color: rgb(255, 255, 255); background: rgb(64, 85, 148); border: none; height: 30px; line-height: 30px; cursor: move;"
        >添加</div>
        <div class="layui-layer-content" style="height: 100%;">
          <div id="model1" class="layerModel layui-layer-wrap" style="display: block;">
            <div class="wrap">
              <table class="context">
                <tbody>
                  <tr>
                    <td>账号</td>
                    <td>
                      <input type="text" v-model="addid" />
                    </td>
                    <td>密码</td>
                    <td>
                      <input type="text" v-model="Addpaw" />
                    </td>
                  </tr>
                  <tr>
                    <td style="width:80px">房间数量</td>
                    <td>
                      <input type="text" v-model="addroot" />
                    </td>
                    <td style="width:80px">到期时间</td>
                    <td>
                        <div class="block">
                          <el-date-picker
                            v-model="value2"
                            type="date"
                            placeholder="选择日期">
                          </el-date-picker>
                        </div>
                    </td>
                  </tr>
                </tbody>
                <tfoot>
                  <tr>
                    <td colspan="4">
                      <a
                        href="javascript:void(0);"
                        @click="changeBackWater(pro)"
                        class="btn sendBtn"
                      >提交保存</a>
                    </td>
                  </tr>
                </tfoot>
              </table>
            </div>
          </div>
        </div>
        <span class="layui-layer-setwin">
          <a @click="closemode6" class="layui-layer-ico layui-layer-close layui-layer-close1"></a>
        </span>
      </div>
      <div
        class="layui-layer-shade"
        id="layui-layer-shade3"
        style="z-index: 1000;background-color: rgb(0, 0, 0);opacity: 0.3;"
      ></div>
    </div>
    <!-- 调整 -->
    <div ref="mode3" style="display: none">
      <div
        class="layui-layer layui-layer-page"
        id="layui-layer5"
        style="z-index: 1001; width: 600px; height: 75%; top: 8px; left: 30%;"
      >
        <div
          class="layui-layer-title"
          style="color: rgb(255, 255, 255); background: rgb(64, 85, 148); border: none; height: 30px; line-height: 30px; cursor: move;"
        >调整</div>
        <div class="layui-layer-content" style="height: 100%;">
          <div id="model1" class="layerModel layui-layer-wrap" style="display: block;">
            <div class="wrap">
              <table class="context">
                <tbody>
                  <tr>
                    <td>用户名id</td>
                    <td>
                      <input type="text" v-model="id" />
                    </td>
                    <td>用户名称</td>
                    <td>
                      <input type="text" v-model="user" />
                    </td>
                  </tr>
                  <tr>
                    <td>最近登录</td>
                    <td>
                      <input type="text" v-model="login" />
                    </td>
                    <td>密码</td>
                    <td>
                      <input type="text" v-model="paw" />
                    </td>
                  </tr>
                  <tr>
                    <td style="width:80px">房间数量</td>
                    <td>
                      <input type="text" v-model="root" />
                    </td>
                    <td style="width:80px">到期时间</td>
                    <td>
                        <div class="block">
                          <el-date-picker
                            v-model="value1"
                            type="date"
                            placeholder="选择日期">
                          </el-date-picker>
                        </div>
                    </td>
                  </tr>
                  <tr>
                    <td>禁用彩种</td>
                    <td colspan="3">
                      <el-button
                        type="success"
                        @click="cqsscC('cqssc')"
                        :style="`border:none; margin-top:10px; background-color: ${color.cqssc[0]}; color:${color.cqssc[1]};`"
                      >重庆时时彩({{color.cqssc[2]}})</el-button>
                      <el-button
                        type="success"
                        @click="cqsscC('pk10')"
                        :style="`border:none; margin-top:10px; background-color: ${color.pk10[0]}; color:${color.pk10[1]};`"
                      >PK拾({{color.pk10[2]}})</el-button>
                                            <el-button
                        type="success"
                        @click="cqsscC('hljssc')"
                        :style="`border:none; margin-top:10px; background-color: ${color.hljssc[0]}; color:${color.cqssc[1]};`"
                      >荷兰极速赛车({{color.hljssc[2]}})</el-button>
                      <el-button
                        type="success"
                        @click="cqsscC('hlssc')"
                        :style="`border:none; margin-top:10px; background-color: ${color.hlssc[0]}; color:${color.pk10[1]};`"
                      >荷兰时时彩({{color.hlssc[2]}})</el-button>
                                            <el-button
                        type="success"
                        @click="cqsscC('jssc')"
                        :style="`border:none; margin-top:10px; background-color: ${color.jssc[0]}; color:${color.cqssc[1]};`"
                      >极速赛车({{color.jssc[2]}})</el-button>
                      <el-button
                        type="success"
                        @click="cqsscC('aozhou5')"
                        :style="`border:none; margin-top:10px; background-color: ${color.aozhou5[0]}; color:${color.pk10[1]};`"
                      >澳洲5({{color.aozhou5[2]}})</el-button>
                                            <el-button
                        type="success"
                        @click="cqsscC('aozhou10')"
                        :style="`border:none; margin-top:10px; background-color: ${color.aozhou10[0]}; color:${color.cqssc[1]};`"
                      >澳洲10({{color.aozhou10[2]}})</el-button>
                    </td>
                  </tr>
                </tbody>
                <tfoot>
                  <tr>
                    <td colspan="4">
                      <a
                        href="javascript:void(0);"
                        @click="changeBackWater(pro)"
                        class="btn sendBtn"
                      >提交保存</a>
                    </td>
                  </tr>
                </tfoot>
              </table>
            </div>
          </div>
        </div>
        <span class="layui-layer-setwin">
          <a @click="closemode3" class="layui-layer-ico layui-layer-close layui-layer-close1"></a>
        </span>
      </div>
      <div
        class="layui-layer-shade"
        id="layui-layer-shade3"
        style="z-index: 1000;background-color: rgb(0, 0, 0);opacity: 0.3;"
      ></div>
    </div>
    

    <!-- 修改回水 -->
    <!-- <div ref="mode3" style="display: none">
      <div
        class="layui-layer layui-layer-page"
        id="layui-layer5"
        style="z-index: 1001; width: 600px; height: 75%; top: 8px; left: 30%;"
      >
        <div
          class="layui-layer-title"
          style="color: rgb(255, 255, 255); background: rgb(64, 85, 148); border: none; height: 30px; line-height: 30px; cursor: move;"
        >
          设置代理回水比例
        </div>
        <div class="layui-layer-content" style="height: 100%;">
          <div
            id="model1"
            class="layerModel layui-layer-wrap"
            style="display: block;"
          >
            <div class="wrap">
              <table class="context">
                <tbody>
                  <tr>
                    <td>重庆时时彩</td>
                    <td>
                      <input type="text" v-model="pro.CQHLSX_Backwater" />
                      %
                    </td>
                  </tr>
                  <tr>
                    <td>PK拾</td>
                    <td>
                      <input type="text" v-model="pro.PK10_Backwater" />
                      %
                    </td>
                  </tr>
                  <tr>
                    <td>幸运飞艇</td>
                    <td>
                      <input type="text" v-model="pro.XYFT_Backwater" />
                      %
                    </td>
                  </tr>
                  <tr>
                    <td>急速赛车</td>
                    <td>
                      <input type="text" v-model="pro.JSSC_Backwater" />
                      %
                    </td>
                  </tr>
                  <tr>
                    <td>澳洲5</td>
                    <td>
                      <input type="text" v-model="pro.AZ5_Backwater" />
                      %
                    </td>
                  </tr>
                  <tr>
                    <td>澳洲10</td>
                    <td>
                      <input type="text" v-model="pro.AZ10_Backwater" />
                      %
                    </td>
                  </tr>
                </tbody>
                <tfoot>
                  <tr>
                    <td colspan="2">
                      <a
                        href="javascript:void(0);"
                        @click="changeBackWater(pro)"
                        class="btn sendBtn"
                        >提交保存</a
                      >
                    </td>
                  </tr>
                </tfoot>
              </table>
            </div>
          </div>
        </div>
        <span class="layui-layer-setwin">
          <a
            @click="closemode3"
            class="layui-layer-ico layui-layer-close layui-layer-close1"
          ></a>
        </span>
      </div>
      <div
        class="layui-layer-shade"
        id="layui-layer-shade3"
        style="z-index: 1000;background-color: rgb(0, 0, 0);opacity: 0.3;"
      ></div>
    </div>-->

    <!-- 添加下线 -->
    <div ref="mode2" style="display: none">
      <div
        class="layui-layer layui-layer-page"
        id="layui-layer5"
        style="z-index: 1001; width: 600px; height: 75%; top: 8px; left: 30%;"
      >
        <div
          class="layui-layer-title"
          style="color: rgb(255, 255, 255); background: rgb(64, 85, 148); border: none; height: 30px; line-height: 30px; cursor: move;"
        >添加下线</div>
        <div class="layui-layer-content" style="height: 100%;">
          <div id="model2" class="layerModel layui-layer-wrap" style="display: block;">
            <div class="wrap">
              <table class="context">
                <tbody>
                  <tr>
                    <td>用户ID</td>
                    <td>
                      <input type="text" v-model="inputVal" />
                    </td>
                  </tr>
                </tbody>
                <tfoot>
                  <tr>
                    <td></td>
                    <td>
                      <a href="javascript:void(0);" @click="addBtn" class="addBtn">添加</a>
                    </td>
                  </tr>
                </tfoot>
              </table>
              <div id="model2Pages"></div>
            </div>
          </div>
        </div>
        <span class="layui-layer-setwin">
          <a @click="closemode2" class="layui-layer-ico layui-layer-close layui-layer-close1"></a>
        </span>
      </div>
      <div
        class="layui-layer-shade"
        id="layui-layer-shade3"
        style="z-index: 1000;background-color: rgb(0, 0, 0);opacity: 0.3;"
      ></div>
    </div>

    <!-- 取消下线 -->
    <div ref="mode4" style="display: none">
      <div
        class="layui-layer layui-layer-page"
        id="layui-layer5"
        style="z-index: 1001; width: 600px; height: 75%; top: 8px; left: 30%;"
      >
        <div
          class="layui-layer-title"
          style="color: rgb(255, 255, 255); background: rgb(64, 85, 148); border: none; height: 30px; line-height: 30px; cursor: move;"
        >下线列表</div>
        <div class="layui-layer-content" style="height: 100%;">
          <div id="model2" class="layerModel layui-layer-wrap" style="display: block;">
            <div class="wrap">
              <table class="context">
                <tbody>
                  <tr v-for="(line, index) in offlineList" :key="index">
                    <td>{{ line.sun_nickname }} (ID:{{ line.sub_id }})</td>
                    <td>
                      <a
                        href="javascript:void(0);"
                        @click="deleBtn(line)"
                        class="btn cancelBtn"
                      >取消下线</a>
                    </td>
                  </tr>
                </tbody>
              </table>
              <div id="model2Pages"></div>
            </div>
          </div>
        </div>
        <span class="layui-layer-setwin">
          <a @click="closemode4" class="layui-layer-ico layui-layer-close layui-layer-close1"></a>
        </span>
      </div>
      <div
        class="layui-layer-shade"
        id="layui-layer-shade3"
        style="z-index: 1000;background-color: rgb(0, 0, 0);opacity: 0.3;"
      ></div>
    </div>
  </div>
</template>

<script>
import { mapState, mapActions } from "vuex";
// import axios from "axios";
import http from "@/utils/http";
import { Toast } from "vant";
export default {
  data() {
    return {
      pro: "",
      inputVal: "",
      accountId: "",
      root: "", //房间数量
      value2:"",
      addid:"",
      addpaw:"",
      addroot:"",
      value1: "", //到期时间
      root: "", //房间数量
      id:"",
      user:"",
      login:"",
      paw:"",
      color: {
        cqssc: ["#51a351", "#FFFFFF", "开启"],
        pk10: ["#51a351", "#FFFFFF", "开启"],
        hljssc: ["#51a351", "#FFFFFF", "开启"],
        hlssc: ["#51a351", "#FFFFFF", "开启"],
        jssc: ["#51a351", "#FFFFFF", "开启"],
        aozhou5: ["#51a351", "#FFFFFF", "开启"],
        aozhou10: ["#51a351", "#FFFFFF", "开启"],
      }
    };
  },
  computed: {
    ...mapState("agent", ["agentList", "offlineList"])
  },

  methods: {
    cqsscC(key) {
      let that=this;
      console.log(that.color)
      if (this.color[key][0] == "#51a351") {
        this.color[key]  = ["#bd362f", "#FFFFFF", "关闭"];
      } else {
        this.color[key]  = ["#51a351", "#FFFFFF", "开启"];
      }
    },
    ...mapActions("agent", ["getAgentList", "getOfflineList"]),
    //  取消代理
    cgAgent(account_id, agent) {
      http
        .post(
          `/api/login/room_user/is_agent?account_id=${account_id}&is_agent=${agent}&token=2Q3ntNqyo5eaLmXITABb`
        )
        .then(response => {
          console.log(response);
          console.log(agent);
          this.getAgentList();
        });
    },
    // 修改回水
    changeBackWater(pro) {
      console.log(pro);
      http
        .post(
          `/api/login/agent/sub?account_id=${pro.account_id}&CQHLSX_Backwater=${pro.CQHLSX_Backwater}&PK10_Backwater=${pro.PK10_Backwater}&XYFT_Backwater=${pro.XYFT_Backwater}&JSSC_Backwater=${pro.JSSC_Backwater}&AZ5_Backwater=${pro.AZ5_Backwater}&AZ10_Backwater=${pro.AZ10_Backwater}&token=2Q3ntNqyo5eaLmXITABb`
        )
        .then(response => {
          console.log(response.data);
          let res = response.data;
          if (res.status == true) {
            this.getAgentList();
          } else {
            Toast(res.msg);
          }

          this.$refs.mode3.style.display = "none";
        });
    },
    // 添加下线
    addBtn() {
      http
        .post(
          `/api/login/sub_agent/add?account_id=${this.accountId}&sub_id=${this.inputVal}&token=2Q3ntNqyo5eaLmXITABb`
        )
        .then(response => {
          let res = response.data;
          this.inputVal = "";
          Toast(res.msg);
        });
      this.closemode2();
    },
    // 取消下线
    deleBtn(line) {
      http
        .post(
          `/api/login/sub_agent/delete?account_id=${line.account_id}&sub_id=${line.sub_id}&token=2Q3ntNqyo5eaLmXITABb`
        )
        .then(response => {
          let res = response.data;
          Toast(res.msg);
        });
      this.closemode4();
    },
    // 房间列表
    accountAgent1(item) {
      let mode5 = this.$refs.mode5;
      mode5.style.display = "block";
      this.pro = item;
      console.log(123);
    },
    // 关闭房间列表
    closemode5() {
      let mode5 = this.$refs.mode5;
      mode5.style.display = "none";
    },
    // 添加
    Add(item){
      let mode6 = this.$refs.mode6;
      mode6.style.display = "block";
      this.pro = item;
    },
    // 关闭添加
    closemode6() {
      let mode6 = this.$refs.mode6;
      mode6.style.display = "none";
    },
    //调整
    revision(item) {
      let mode3 = this.$refs.mode3;
      mode3.style.display = "block";
      this.pro = item;
    },
    // 点击修改回水
    accountAgent3(item) {
      let mode3 = this.$refs.mode3;
      mode3.style.display = "block";
      this.pro = item;
    },
    // 关闭修改回水页面
    closemode3() {
      let mode3 = this.$refs.mode3;
      mode3.style.display = "none";
    },

    // 点击添加下线
    accountAgent2(id) {
      console.log(id);
      let mode2 = this.$refs.mode2;
      mode2.style.display = "block";
      this.accountId = id;
    },
    // 关闭添加下线页面
    closemode2() {
      let mode2 = this.$refs.mode2;
      mode2.style.display = "none";
    },
    // 点击下线列表
    accountAgent4(item) {
      let mode4 = this.$refs.mode4;
      this.getOfflineList(item.account_id);
      mode4.style.display = "block";
    },
    // 关闭下线列表页面
    closemode4() {
      let mode4 = this.$refs.mode4;
      mode4.style.display = "none";
    }
  },

  created() {
    this.getAgentList();
  }
};
</script>

<style>
.el-input{
  left: 10px !important;
}
.el-input__inner{
 height:25px !important;
 width: 180px !important;
}
.el-input__icon{
  position: relative;
  bottom: 7px;
}
table tbody tr:nth-child(even) {
  background: #f2f2f2;
}
.agent a {
  color: #08c;
  text-decoration: none;
}
.agent a:hover,
a:focus {
  color: #005580;
  text-decoration: underline;
}
.agentTable img {
  display: block;
  width: 30px;
  height: 30px;
  margin: 0 auto;
}
.layerModel .wrap {
  box-sizing: border-box;
  height: 100%;
  border-top: none;
  overflow-y: auto;
  padding: 10px;
}
#model1 .sendBtn,
#model3 .cancelBtn {
  display: inline-block;
  padding: 4px 12px;
  margin-bottom: 8px;
  font-size: 14px;
  line-height: 20px;
  color: #333;
  text-align: center;
  text-shadow: 0 1px 1px rgba(255, 255, 255, 0.75);
  vertical-align: middle;
  cursor: pointer;
  background-color: #f5f5f5;
  border: 1px solid #ccc;
  border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
}
#model1 .sendBtn:hover,
#model3 .cancelBtn:hover {
  text-decoration: none;
}
a:hover,
a:active {
  outline: 0;
}
#model2 .addBtn {
  width: 40px;
  height: 22px;
  border: 1px solid #9b9b9b;
  background-color: #e1e1e1;
  text-align: center;
  line-height: 22px;
  color: #333;
  display: inline-block;
  margin: 0 10px;
  text-decoration: none;
  vertical-align: super;
}
#model2 .cancelBtn {
  display: inline-block;
  padding: 4px 12px;
  margin-bottom: 8px;
  font-size: 14px;
  line-height: 20px;
  color: #333;
  text-align: center;
  background-color: #f5f5f5;
}
#model2 a {
  text-decoration: none;
}
</style>
